<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>修改密码</title>
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">


<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/forms.css" rel="stylesheet">
<style>

</style>
</head>

<body >

    <button type="button" class="btn btn-primary" id="myModalLink" data-target="#myModalContainer" role="button" data-toggle="modal" >触发遮罩窗体</button>
    
    
    <!-- Modal -myModalContainer-->
    <div class="modal fade" id="myModalContainer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div  id="wrapper" class="modal-content ">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></button>
                
	  				<div id="login_form" class="form">
						<form class="register-form" id="resetForm">
                        	 <button type="button" class="close return" name="Submit" onclick="resetPasswordBack();"><i class="glyphicon glyphicon-chevron-left"></i></button>
                        	<h3 class="modal-title" >找回密码</h3><p></p>
                    		<p>验证码将会发送至你的手机用户中心</p>
                            <div class="xdw-form"></div>
                            <div class="xdw-form">
                				<label class="form-text">账号名</label>
                				<input type="text" class="input col-sm-8" >
       						</div>
       
       						<div class="xdw-form">
               					<label class="form-text">手机号</label>
                				<input type="text" class="input col-sm-8" >
       						</div>

        					<div class="xdw-form">
                				<label class="form-text">验证码</label>
                				<input type="text" class="input col-sm-6" >
                				<a href="#" class="yzm1" onclick="countDown(this)"><span class="yzm active" onclick="countDown">点击获取</span></a>
       						</div>
                            <br>
		  					<p class=""><a href="#" class="btn btn-primary btn-login">确定登录</a></p>
						</form>
						
						<form class="register-form" id="loginForm">
                        	 <button type="button" class="close return" name="Submit" onclick="loginBack();"><i class="glyphicon glyphicon-chevron-left"></i></button>
                        	<h3 class="modal-title" >手机验证登录</h3><p></p>
                    		<p>验证码将会发送至你的手机用户中心</p>
                            <div class="xdw-form"></div>
                            <div class="xdw-form">
                				<label class="form-text">账号名</label>
                				<input type="text" class="input col-sm-8" >
       						</div>
       
       						<div class="xdw-form">
               					<label class="form-text">手机号</label>
                				<input type="text" class="input col-sm-8" >
       						</div>

        					<div class="xdw-form">
                				<label class="form-text">验证码</label>
                				<input type="text" class="input col-sm-6" >
                				<a href="#" class="yzm1" onclick="countDown(this)"><span class="yzm active">点击获取</span></a>
       						</div>
                            <br>
		  					<p class=""><a href="#" class="btn btn-primary btn-login">确定登录</a></p>
						</form>
                        
                        
						<form class="login-form">
                        	<h3 class="modal-title" >无法登陆</h3><p></p>
                    		<p>我们提供两种方式帮助你重新登录用户中心</p>
                            <br>
		  					<p class="message"><a href="#" class="btn btn-primary btn-login" onclick="showResetPassword();">找回密码</a></p>
                            <p class="message"><a href="#" class="btn btn-primary btn-login" onclick="showLogin();">使用手机验证码登录</a></p>
						</form>
				</div>
            </div>
         </div>
     </div>
     
     
    

	
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">

	function showResetPassword() {
		
	
		$('#resetForm').animate({
			height: 'toggle',
			opacity: 'toggle'
		}, 'slow');
		
		$('.login-form').animate({
			height: 'toggle',
			opacity: 'hide'
		}, 'slow');
	}
	
	function showLogin() {
		$('#loginForm').animate({
			height: 'toggle',
			opacity: 'toggle'
		}, 'slow');
		
		$('.login-form').animate({
			height: 'toggle',
			opacity: 'hide'
		}, 'slow');
	}
	
	function resetPasswordBack() {
		$('#resetForm').animate({
			height: 'toggle',
			opacity: 'toggle'
		}, 'slow');
		
		$('#loginForm').hide();
		
		$('.login-form').animate({
			height: 'toggle',
			opacity: 'show'
		}, 'slow');
	}
	
	function loginBack() {
	
		$('#resetForm').hide();
		
		$('#loginForm').animate({
			height: 'toggle',
			opacity: 'toggle'
		}, 'slow');
		
		$('.login-form').animate({
			height: 'toggle',
			opacity: 'show'
		}, 'slow');
		
	}
	var wait=60;
	
	function countDown(obj) {
		if (wait == 0) {
			$(obj).attr('onclick', 'countDown(this)');
            $(obj).html('<span class="yzm active">点击获取</span>');  
            wait = 60;  
        } else {  
			$(obj).attr('onclick', '');
            $(obj).html('<span class="yzm">' + wait + '秒后重发</span>');
            wait--;  
            setTimeout(function() {  
                countDown(obj)  
            },  
            1000)  
        }
	
	}

</script>

</body>
</html>
